// 模板配置页面样式

.template-config-container {
  .page-header {
    .breadcrumb {
      :deep(.el-breadcrumb__item) {
        .el-breadcrumb__inner {
          font-weight: 400;
          color: #606266;

          &.is-link {
            color: #409eff;

            &:hover {
              color: #66b1ff;
            }
          }
        }
      }
    }

    .persona-info {
      .persona-meta {
        .meta-item {
          position: relative;

          &:not(:last-child)::after {
            content: "";
            position: absolute;
            right: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 12px;
            background-color: #e5e7eb;
          }
        }
      }
    }
  }

  .tabs-container {
    :deep(.el-tabs__nav-wrap) {
      &::after {
        background-color: #e5e7eb;
      }
    }

    :deep(.el-tabs__active-bar) {
      background-color: #409eff;
    }

    :deep(.el-tabs__item) {
      padding: 0 20px;
      font-size: 14px;

      &.is-active {
        color: #409eff;
        font-weight: 600;
      }

      &:hover {
        color: #66b1ff;
      }
    }
  }

  .template-section,
  .target-account-section {
    .section-header {
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 16px;
      margin-bottom: 24px;
    }

    .template-table {
      :deep(.el-table) {
        border: 1px solid #ebeef5;
        border-radius: 6px;
        overflow: hidden;

        .el-table__header {
          th {
            background-color: #fafafa;
            border-bottom: 1px solid #ebeef5;
          }
        }

        .el-table__body {
          tr {
            &:hover {
              background-color: #f5f7fa;
            }
          }
        }
      }

      .package-tags {
        max-width: 180px;

        .package-tag {
          font-size: 12px;
          height: 20px;
          line-height: 18px;
          border-radius: 10px;
        }
      }

      .preview-cell {
        .preview-icon {
          &.video-icon {
            color: #409eff;
          }

          &.image-icon {
            color: #67c23a;
          }
        }

        .preview-name {
          display: block;
          margin-top: 2px;
        }
      }

      .action-buttons {
        .el-button {
          margin: 0 2px;

          &:hover {
            background-color: #f0f2f5;
            border-radius: 4px;
          }
        }
      }
    }

    .target-account-list {
      .account-card {
        position: relative;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 4px;
          background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%);
          border-radius: 0 2px 2px 0;
        }

        .account-header {
          .platform-tag {
            font-size: 12px;
            height: 24px;
            line-height: 22px;
            border-radius: 12px;
            border: none;
            font-weight: 500;
          }

          .account-actions {
            opacity: 0;
            transition: opacity 0.2s ease;
          }
        }

        &:hover {
          .account-actions {
            opacity: 1;
          }
        }

        .account-content {
          .content-text {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  // 弹窗样式
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff;

    .el-dialog__header {
      background-color: #ffffff;
      border-bottom: none;
      padding: 20px 24px;

      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
      }
    }

    .el-dialog__body {
      padding: 24px;
      background-color: #ffffff;
    }

    .el-dialog__footer {
      padding: 16px 24px;
      border-top: none;
      background-color: #ffffff;
    }
  }

  .template-form,
  .target-account-form {
    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
    }

    :deep(.el-input__wrapper) {
      border-radius: 6px;

      &.is-focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
      }
    }

    :deep(.el-select) {
      .el-select__wrapper {
        border-radius: 6px;

        &.is-focused {
          border-color: #409eff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }
      }
    }

    :deep(.el-textarea__inner) {
      border-radius: 6px;

      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
      }
    }

    :deep(.el-checkbox-group) {
      .el-checkbox {
        margin-right: 24px;

        .el-checkbox__label {
          font-weight: 400;
        }
      }
    }

    .file-upload-area {
      :deep(.el-upload) {
        width: 100%;

        .el-upload-dragger {
          border: 2px dashed #d9d9d9;
          border-radius: 8px;
          background-color: #fafafa;
          transition: all 0.3s ease;

          &:hover {
            border-color: #409eff;
            background-color: #f0f8ff;
          }

          .el-icon--upload {
            font-size: 48px;
            color: #c0c4cc;
            margin-bottom: 8px;
          }

          .el-upload__text {
            color: #606266;
            font-size: 14px;

            em {
              color: #409eff;
              font-style: normal;
              font-weight: 500;
            }
          }
        }

        .el-upload__tip {
          color: #909399;
          font-size: 12px;
          margin-top: 8px;
        }
      }

      .no-file-tip {
        text-align: center;
        padding: 8px;
        background-color: #f5f7fa;
        border-radius: 4px;
        margin-top: 8px;
        border: 1px solid #ebeef5;
      }
    }
  }

  .dialog-footer {
    .el-button {
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: 500;
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 16px;

    .page-header {
      padding: 16px;
    }

    .tabs-container {
      padding: 0 16px;
    }

    .template-section,
    .target-account-section {
      padding: 16px;

      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .target-account-list {
        grid-template-columns: 1fr;
      }
    }

    :deep(.el-dialog) {
      width: 90% !important;
      margin: 5vh auto;
    }
  }
}

// 标签颜色定义
.platform-tag {
  &[style*="#fe2c55"] {
    background-color: rgba(254, 44, 85, 0.1);
    color: #fe2c55;
  }

  &[style*="#ff2442"] {
    background-color: rgba(255, 36, 66, 0.1);
    color: #ff2442;
  }

  &[style*="#07c160"] {
    background-color: rgba(7, 193, 96, 0.1);
    color: #07c160;
  }

  &[style*="#e6162d"] {
    background-color: rgba(230, 22, 45, 0.1);
    color: #e6162d;
  }
}
